<template>
  <el-tabs type="border-card" v-model="chartName" @tab-click="getData">
    <el-tab-pane label="编制柱状图" name="bar1">
      <div class="import-btn">
        <el-button
          v-if="returnOrgBtn"
          type="primary"
          @click="returnOrgChartData"
          >返回</el-button
        >
        <el-button type="primary" @click="downPdf('1', orgName)">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportExcel"> 导出excel </el-button>
        <el-button type="primary" @click="handlePrint('orgBarChart')">
          打印图表
        </el-button>
      </div>
      <div class="orgBarChart" v-if="chartName === 'bar1'" style="width: 100%">
        <img
          src=""
          id="orgBarChart"
          style="height: 450px; width: 100%; display: none"
        />
        <bar-echart
          ref="orgBarChart"
          :chartData="chartData2"
          @updateOrgBarData="updateOrgBarData"
        ></bar-echart>
      </div>
    </el-tab-pane>
    <el-tab-pane label="人员柱状图" name="bar2">
      <div class="import-btn">
        <el-button
          v-if="returnPersonBtn"
          type="primary"
          @click="returnPersonChartData"
          >返回</el-button
        >
        <el-button type="primary" @click="downPdf('2', orgName)">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportPersonExcel">
          导出excel
        </el-button>
        <el-button type="primary" @click="handlePrint('personBarChart')">
          打印图表
        </el-button>
      </div>
      <div
        class="personBarChart"
        v-if="chartName === 'bar2'"
        style="width: 100%"
      >
        <img
          src=""
          id="personBarChart"
          style="height: 450px; width: 100%; display: none"
        />
        <PersonBarEChart
          ref="personBarChart"
          :chartData="chartData3"
          @updatePersonBarData="updatePersonBarData"
        ></PersonBarEChart>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import BarEchart from "./components/BarEChart.vue";
import PersonBarEChart from "./components/PersonBarEChart.vue";
import { queryBarEchartsData } from "@/api/orgstatchart/index.js";
import { queryYearBarEchartsData } from "@/api/overallchart/index.js";
import { getPdf } from "@/api/tool/getPdf.js";
import print from "print-js";
export default {
  components: {
    BarEchart,
    PersonBarEChart,
  },
  data() {
    return {
      returnPersonBtn: false,
      returnOrgBtn: false,
      chartName: "bar1",
      chartData2: {},
      chartData3: {},
      orgId: localStorage.getItem("orgId"),
      orgName: localStorage.getItem("orgName"),
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handlePrint(id) {
      console.log("d", id);
      if (id === "orgBarChart") {
        var barChartDataUrl = this.$refs.orgBarChart.barChartDataUrl;
      } else {
        var barChartDataUrl = this.$refs.personBarChart.barChartDataUrl;
      }
      var printImgId = document.getElementById(id);
      printImgId.setAttribute("src", barChartDataUrl);
      document.getElementById(id).style.display = "block";
      let userAgent = navigator.userAgent;
      //判断是否Firefox浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        console.log("Firefox");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          // header: "12321321",
          // headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      //判断是否chorme浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        console.log("Chrome");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          // header: "12321321",
          // headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      //判断是否IE浏览器
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        console.log("ActiveXObject");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          // header: "12321321",
          // headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      document.getElementById(id).style.display = "none";
    },
    exportExcel() {
      this.download(
        "org/exportExcel",
        {
          orgId: this.orgId,
        },
        this.orgName + `下属机构编制信息.xlsx`
      );
    },
    exportPersonExcel() {
      this.download(
        "org/exportPersonExcel",
        {
          orgId: this.orgId,
        },
        this.orgName + `下属机构人员信息.xlsx`
      );
    },
    downPdf(index, orgName) {
      if (index === "1") {
        this.downloadReprot(orgName + "下属机构编制柱状图", "orgBarChart");
      } else if (index === "2") {
        this.downloadReprot(orgName + "下属机构人员柱状图", "personBarChart");
      }
    },
    downloadReprot(fileName, domName) {
      // 下载过程中进行锁屏
      const loading = this.$loading({
        lock: true,
        text: "请稍等,下载中.....",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getPdf(fileName, domName);
      // 关闭锁屏
      loading.close();
    },
    getData() {
      queryBarEchartsData({ orgId: localStorage.getItem("orgId") }).then(
        (res) => {
          this.chartData3 = res.data;
          this.chartData2 = res.data;
          this.returnPersonBtn = false;
          this.returnOrgBtn = false;
        }
      );
    },
    returnOrgChartData() {
      this.getData();
      this.orgId = localStorage.getItem("orgId");
      this.orgName = localStorage.getItem("orgName");
      this.$refs.orgBarChart.clickFlag = true;
    },
    returnPersonChartData() {
      this.getData();
      this.orgId = localStorage.getItem("orgId");
      this.orgName = localStorage.getItem("orgName");
      this.$refs.personBarChart.clickFlag = true;
    },
    updateOrgBarData(index) {
      this.orgId = this.chartData2.orgIdList[index];
      this.orgName = this.chartData2.orgDataList[index];
      queryBarEchartsData({ orgId: this.chartData2.orgIdList[index] }).then(
        (res) => {
          if (res.data.orgDataList.length !== 0) {
            this.chartData2 = res.data;
            this.returnOrgBtn = true;
            this.$refs.orgBarChart.clickFlag = false;
          }
        }
      );
    },
    updatePersonBarData(index) {
      this.orgId = this.chartData3.orgIdList[index];
      this.orgName = this.chartData3.orgDataList[index];
      queryBarEchartsData({ orgId: this.chartData3.orgIdList[index] }).then(
        (res) => {
          if (res.data.orgDataList.length !== 0) {
            this.chartData3 = res.data;
            this.returnPersonBtn = true;
            this.$refs.personBarChart.clickFlag = false;
          }
        }
      );
    },
  },
};
</script>

<style>
.import-btn {
  margin-left: 60px;
  margin-bottom: -23px;
}
</style>
